<template>
  <div class="app-container">
    <el-card style="width: 100%">
      <el-row
        style="margin: 5px 0px"
        type="flex"
        justify="space-around">
        <el-col :span="12">
          <span style="margin-right: 20px">产品编号：{{ product_no }}</span>
        </el-col>
        <el-col
          :span="12"
          style="text-align: right"></el-col>
      </el-row>
      <table-list
        ref="tableList"
        :fields="tableDataColumn"
        :pagination="true"
        :searchFunc="mobileNumberPortabilityList"
        :searchDefault="searchConditions"
        border></table-list>
    </el-card>
  </div>
</template>
<script>
import { mobileNumberPortabilityList } from '@/api/product';
import TableList from '@/components/TableList/index';
export default {
  name:"list",
  components:{
    TableList
  },
  props: {
    product_no: {
      type: [String, Number],
      default: '',
    }
  },
  data(){
    return {
      mobileNumberPortabilityList,
      tableDataColumn:[
        {
          prop: 'phone',
          searchName:"phone",
          label: '号码',
          minWidth: '120',
          searchType:'input'
        },
        {
          prop: 'area',
          searchName:"area",
          label: '号码归属地',
          minWidth: '120',
          searchType:'input'
        },
        {
          prop: 'init_isp',
          searchName:"init_isp",
          label: '初始运营商',
          minWidth: '120',
          searchType:'input'
        },
        {
          prop: 'now_isp',
          searchName:"now_isp",
          label: '转网后运营商',
          minWidth: '120',
          searchType:'input'
        },
        {
          prop: 'status',
          searchName:"status",
          label: '状态',
          options:[
            {
                value: 100,
                label: '成功',
                color: '#67C23A'
              },
              {
                value: 0,
                label: '失败',
                color: '#F56C6C'
              }
          ],
          minWidth: '120',
          searchType:'select'
        },
        {
          prop: 'message',
          searchName:"message",
          label: '描述',
          minWidth: '120',
        },
        {
          prop: 'is_charge',
          searchName:"is_charge",
          label: '收费',
          searchType: 'select',
          options:[
            {
                value: 1,
                label: '扣费',
                color: '#67C23A'
              },
              {
                value: 0,
                label: '不扣费',
                color: '#F56C6C'
              }
          ],
          minWidth: '120'
        },
        {
          prop: 'user.nick_name',
          label: '用户',
          minWidth: '120'
        },
        {
          prop: 'created_at',
          searchName:"created_at",
          label: '创建时间',
          minWidth: '180',
          searchType: 'dateTime',
        }
      ]
    }
  },
  computed:{
    searchConditions(){
      return {
        user_id: this.$store.state.user.info.id,
        product_no: this.product_no
      }
    }
  },
}
</script>